<template>
  <view>
    <!-- @blur="clickSearch()" -->
    <u-search bgColor="#fff" @blur="clickSearch()" placeholder="请输入小区" v-model="searchValue" @search="clickSearch()" action-text="取消" @custom="cancelSearch"></u-search>
    <view class="tag">
      <view class="tag-l">
        <view class="content-tag"  v-for="(item,index) in historyList" :key="index" :title="item">
          <u-tag :text="item.name" @click="clickSearchTag(item.name)" size="mini" closable :show="item.ishow" :name="index" @close="myclose"></u-tag>
        </view>
      </view>
      <view class="trash">
        <u-text prefixIcon="trash" iconStyle="font-size: 19px" text="删除" @click="clickTrashTag()"></u-text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      historyList: [
        {name:'独栋高端公寓',ishow:true}, 
        {name:'越秀星汇尚城',ishow:true}, 
        {name:'迪凯运河印象',ishow:true}, 
        {name:'万科杭宸',ishow:true}, 
        {name:'昌运里',ishow:true}, 
        {name:'宝嘉誉峰',ishow:true}, 
      ]

    }
  },
  methods: {
    clickSearchTag(item) {
      uni.navigateTo({
        url: `/pages/search/searchList?villageName=${item}`
      })
    },
    clickTrashTag() {
      this.historyList = []
    },
    myclose(i) {
      this.historyList.splice(i,1)
    },
    clickSearch() {
      uni.navigateTo({
        url: `/pages/search/searchList?villageName=${this.searchValue}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tag {
  display: flex;
  // justify-content: space-between;

  .tag-l {
    display: flex;
    width: 600rpx;
    overflow: hidden;
    flex-wrap: wrap;
    .content-tag {
      white-space: nowrap; //不换行
      text-overflow: ellipsis; //文本溢出用省略号代替
      margin-right: 5px;
    }
  }
  .trash {
    line-height: 40px;
    height: 40px;
    white-space: nowrap; //不换行
  }
}
</style>